import {useLocation, useNavigate} from 'react-router-dom';
import {playlistTrackAll, playlistType, songsType} from "@src/services/music.ts";
import Return2Icon from "@src/assets/return2.svg?react"
import {useRequest} from "ahooks";
import {useEffect, useState} from "react";
import MusicCard from "@src/components/musicCard";
import "./index.scss"
import {PlaylistTrackDataCreate, PlaylistTrackDataCreateType} from "@src/store/playlistTrackData.ts";
import Skeleton from "@src/components/skeleton";
import InView from "@src/components/InView";
import {debounce} from "@src/utils/method.ts"

export default function SongsList() {
    const location = useLocation();
    const navigate = useNavigate();
    const playlist: playlistType | null = location.state;
    const playlistTrackAllAPi = useRequest(playlistTrackAll, {manual: true})
    const playlistTrackDataCreate: PlaylistTrackDataCreateType = PlaylistTrackDataCreate()
    const [playlistTrackDataCreateData, setPlaylistTrackDataCreateData] = useState<songsType[]>([])
    const [offset, setOffset] = useState(0);


    const getPlaylistTrackAllAPi = (offset: number) => {
        if (playlist) {
            playlistTrackAllAPi.runAsync({id: playlist.id, limit: 15, offset: (offset * 15)}).then((data) => {
                playlistTrackDataCreate.setId(playlist.id)
                setPlaylistTrackDataCreateData((item) => {
                    const newItem = [...item, ...data.songs]
                    const uniqueArr = Array.from(new Set(newItem.map(item => item.id))).map(id => {
                        return newItem.find(item => item.id === id);
                    }) as songsType[];
                    playlistTrackDataCreate.setSongsList(uniqueArr)
                    return uniqueArr;
                })
                setOffset(offset + 1)
            })
        }
    }
    const AddPlaylistTrackAllAPi = debounce(() => {
        if (playlist) {
            if (!playlistTrackAllAPi.loading) {
                getPlaylistTrackAllAPi(offset)
            }

        }
    }, 1000)

    useEffect(() => {
        console.log(location)
        if (playlist == null) {
            navigate("/home/music")
        } else {
            getPlaylistTrackAllAPi(offset)
        }
    }, []);
    return <div className="SongsList">
        <div className="head centered">
            <Return2Icon onClick={() => navigate(-1)}></Return2Icon>
            <h4 className="text-overflow-1">{playlist?.name}</h4>
            <div></div>
        </div>

            <div className="description">
                <p><img className="userHead" src={playlist?.creator?.avatarUrl} alt=""/> {playlist?.creator?.nickname}
                </p>
                <p className="text-overflow-2">{playlist?.description}</p>
                <div className="blur-background"
                     style={{backgroundImage: `url("${playlist?.coverImgUrl}")`}}></div>

            </div>

            <div className="list">
                <ul>
                    <Skeleton loading={playlistTrackDataCreateData.length == 0} style={{aspectRatio: 5}}>
                        {playlistTrackDataCreateData.map((songs) => (
                            <li key={songs.id}>
                                <div className="centered">
                                    <MusicCard songs={songs}></MusicCard>
                                </div>
                            </li>
                        ))}
                    </Skeleton>
                </ul>
                <InView onChange={(e) => {
                    if (e) AddPlaylistTrackAllAPi()
                }}>
                    <div className="text-overflow-1">玩命加载中 (╯°□°）╯︵ ┻━┻</div>
                </InView>
            </div>

    </div>


}